<template>
  <div>
    <bread class="describe">
      <h1>全校人员通讯录</h1>
      <small>学校成员常用通讯录，仅供学校内部使用，如若公开传播将负法律责任</small>
      <div class="pull-right">
         <!-- <el-button type="primary" size="small">添加专家</el-button> -->
      </div>
    </bread>
    <pageContent isCard hasPagination>
      <div class="tabs">
        <el-tabs
          v-model="activeName"
          @tab-click="handleClick">
          <el-tab-pane
            v-for="item in colleges"
            :key="item.id"
            :label="item.name"
            :name="item.colg_id + ''">
            <el-table
              header-row-class-name="custom-table-header-dark-gray"
              :data="staff"
              border
              style="width: 100%">
              <el-table-column
                prop="id"
                align="center"
                label="序号"
                width="180">
              </el-table-column>
              <el-table-column
                prop="realname"
                label="姓名"
                align="center"
                width="180">
              </el-table-column>
              <el-table-column
                prop="degree"
                align="center"
                label="职位">
              </el-table-column>
              <el-table-column
                prop="phone"
                align="center"
                label="手机号">
              </el-table-column>
              <el-table-column
                prop="email"
                align="center"
                label="邮箱">
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>
    </pageContent>
    <pagination
      v-if = "total"
      :total="total"
      :page-size="pageSize"
      :currentPage="search_data.page_size"
      @changePage="fetchData">
    </pagination>
  </div>
</template>

<script>
import pagination from 'components/pagination';
export default {
  name: 'hello',
  data () {
    return {
      activeName: '',
      colleges: [],
      staff: [],
      search_data: {
        page_size: 1,
      },
      pageSize: 10,
      total: 0,
      num: 2
    }
  },
  methods: {
    handleClick(tab, event) {
      this.activeName = tab.name
      this.getStuff()
    },
    fetchData (e) {
      this.search_data.page_size = e
      this.setPath('search_data')
      this.getStuff()
    },
    getStuff() {
      this.$$api_researchTalent_staffs({
        data: {
          page: this.search_data.page_size,
        },
        restfulReq: {
          id: this.activeName
        },
        succFn: res => {
          this.staff = res.staffs
          this.total = res.current_count
          fn && fn()
        }
      })
    },
    getCollege() {
      this.$$api_researchTalent_colleges({
      data: {

      },
      succFn: res => {
        this.colleges = res
        this.getStuff({page: res[0].colg_id})
        this.activeName = res[0].colg_id + ''
      }
    })
    }
  },
  mounted () {
    this.getStuff()
  },
  created(){
    this.getCollege()
    this.setPath('search_data', 1)
  },
  components: {
    pagination
  }
};
</script>
<style scoped lang="scss">
  @import './index.scss';
</style>
